{% extends '::base.html.twig' %}

{% block title %}Consultas{% endblock %}

{% block body -%}
 <div class="container">
  <div class="col-md-12">
 <h4 id="sec0">Consulta  por Edad</h4>
   <hr class="col-md-11 superior">
   
  <div class="col-md-12"> 
    {%include 'SieseEntityBundle:RecursosVistas:filtros_consultas.html.twig'%}
    
      
    {% if not resultado == FALSE %}
      {% if resultado == "vacio" %}
        <div style="margin-top:10px;" class="col-md-8 col-md-offset-2 alert alert-warning"> 
          <a href="#" class="close" data-dismiss="alert">&times;</a>
          No existen registros para la consulta realizada
        </div> 
      {% else %}
        <div id="contenedor-grafico"></div>
      {% endif %} 
    {% endif %}
  </div>
 </div>   
  </div>           
{% endblock %}
{% block javascripts %}
<script language="javascript" type="text/javascript" src="{{ asset('bundles/SieseBundle/js/highcharts/highcharts.js') }}" ></script>
<script>
var _globales = {
    formName: 'siese_filtros_consulta_',
    dataPie: null,
    chart: ''
  }
  

var $form = $("#form-filtros");

$form.validate({
  errorClass: 'error-validacion',
  errorElement:'div',
  submitHandler: function(form) {
    // do other things for a valid form
    form.submit();
  }
});

</script>
<script>
   var data = {{ resultado | raw }};

   _globales.chart =  $('#contenedor-grafico').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: 'Población por Edad - '+ $('#'+_globales.formName+'estadoEnt option:selected').text()
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f}%',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        credits:false,
        series: [{
            type: 'pie',
            name: 'Cantidad de Inspecciones',
            data: data
        }]
    });
</script>

<script>
$('.gif-cargando').hide();    

//estados,municipios,entidades    
$("#siese_filtros_consulta_estadoEnt").change(function(){
    var data = {
      estado_id: $(this).val()
    };
    
    var $entidad_selector = $('#siese_filtros_consulta_entidad');
    
    if($("#siese_filtros_consulta_estadoEnt").val() != 'todos') {
      $('.gif-cargando').show();

    
    
    
    $entidad_selector.html('<option>Seleccione una Opción</option>');
    $.ajax({
      type: 'post',
      url: '{{ path("_select_entidades_x_estado") }}',
      data: data,
      success: function(data) {
        var $entidad_selector = $('#siese_filtros_consulta_entidad');
        $entidad_selector.html('<option>Seleccione una Opción</option>');
        for (var i=0, total = data.length; i < total; i++) {
          $entidad_selector.append('<option value="' + data[i].id + '">' + data[i].nbEntidad + '</option>');
        }
        $entidad_selector.append('<option value="999">Todas las Entidades de Atención</option>');
        $('.gif-cargando').hide();
      }
    });  
    }
});   
</script>
{% endblock %}
